<link href="__PUBLIC__/css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<div class="row">
    <div class="col s12 m8 l8">
        <div class="card">
            <div class="card-move-up waves-effect waves-block waves-light">
                <div class="move-up cyan darken-1">
                    <div>
                        <span class="chart-title white-text">报名数据分析</span>
                    </div>

                    <div class="trending-line-chart-wrapper">
                        <canvas id="trending-line-chart" height="70"></canvas>
                    </div>
                </div>
            </div>
            <div class="card-content">
                <div class="col s12 m3 l3">
                    <div id="doughnut-chart-wrapper">
                        <canvas id="doughnut-chart" height="200"></canvas>
                    </div>
                </div>
                <div class="col s12 m2 l2">
                    <ul class="doughnut-chart-legend">
                        <li class="mobile">女</li>
                        <li class="kitchen">男</li>
                    </ul>
                </div>
                <div class="col s12 m5 l6">
                    <div>
                        <h5>已报名人数：<span class="orange-text">0000/1000</span></h5>
                        <div class="progress">
                            <div class="determinate orange " style="width: 70%"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


</div>


<!-- chartjs -->
<script type="text/javascript" src="__PUBLIC__/js/chart.min.js"></script>
<script>

    window.onload = function () {
        var LineChartSampleData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                label: "My First dataset",
                fillColor: "rgba(128, 222, 234, 0.6)",
                strokeColor: "#ffffff",
                pointColor: "#00bcd4",
                pointStrokeColor: "#ffffff",
                pointHighlightFill: "#ffffff",
                pointHighlightStroke: "#ffffff",
                data: [65, 66]
            }]
        };

        window.LineChartSample = new Chart(document.getElementById("trending-line-chart").getContext("2d")).Line(LineChartSampleData, {
            scaleGridLineColor: "rgba(255,255,255,0.4)",
            scaleFontSize: 12,
            scaleFontStyle: "normal",
            scaleFontColor: "#fff",
            tooltipFillColor: "rgba(255,255,255,0.8)",
            tooltipFontSize: 12,
            tooltipFontColor: "#000",
            tooltipTitleFontSize: 14,
            tooltipTitleFontStyle: "bold",
            tooltipTitleFontColor: "#000",
            responsive: true
        });

        var PieDoughnutChartSampleData = [
            {
                value: 300,
                color: "#F7464A",
                highlight: "#FF5A5E",
                label: "女"
            },
            {
                value: 50,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "男"
            }
        ]

        window.PieChartSample = new Chart(document.getElementById("doughnut-chart").getContext("2d")).Pie(PieDoughnutChartSampleData, {
            responsive: true
        });

    };

</script>
